<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <i th:replace="~{common :: baseUrl}"></i>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

    <!--    头部-->
    <i th:replace="~{common :: head}"></i>

    <div style="background-color:#eeeeee;">
    <!-- 内容主体区域 -->
    <div style="background-color:white; width: 100%;height: 5%;padding-left: 70px;padding-top: 5px" >
        <span class="layui-breadcrumb" >
            <a href="" style="font-size: 20px">人员监控</a>
            <a href="" style="font-size: 20px">员工管理</a>
        </span>
    </div>

    <div style="background-color:white; width: 90%; height: 650px;margin-top: 2%;margin-left: 4% ; padding-left: 3%;padding-top: 3%">
        <!--数据信息-->
        <!--查询条件-->

        <div>
            <form class="layui-form" action="">
                <div class="layui-form-item">

                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" id="staffName"  placeholder="请输入员工名称" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">

                        <div class="layui-input-inline">

                            <select id="departmentId" lay-filter="departmentId" >
                                <option value="">请选择部门</option>
                                <option th:each="l : ${personnelDepartmentList}" th:value="${l.id}" th:text="${l.name}">无</option>
                            </select>

                        </div>
                    </div>
                    <button type="button" class="layui-btn layui-btn-normal" id="selectBut">查询</button>
                </div>
            </form>
        </div>
        <!--展示数据-->
        <div>

            <table class="layui-hide" id="staff" lay-filter="staff" align="center"></table>
            <!--        表格头部工具栏-->
            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>添加</button>
                </div>
            </script>
            <!--        表格右侧操作栏-->
            <script type="text/html" id="barDemo">
                <button class="layui-btn                  layui-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</button>
                <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</button>
                <button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="show"><i class="layui-icon layui-icon-search"></i>查看</button>
            </script>
        </div>


    </div>

</div>
</div>
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="none">
    //JavaScript代码区域
    layui.use(['element','table','form'], function(){
        var element = layui.element;
        var table = layui.table;
        var form = layui.form;
        var $ = layui.$;


        //表格初始化
        table.render({
            elem: '#staff'
            ,url:baseUrl+'personnel/staff/list'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,width: 1400
            ,toolbar: '#toolbarDemo'
            ,cols: [[
                {field:'id', width:100, title: '员工编号', sort: true}
                ,{field:'name', width:100, title: '员工名称'}
                ,{field:'age', width:75, title: '年龄'}
                ,{field:'sex', width:75, title: '性别', templet: '#sexTpl'}
                ,{field:'departmentName', width:100, title: '所在部门'}
                ,{field:'identityCard', width:180, title: '身份证号'}
                ,{field:'educationBackground', width:75, title: '学历'}
                // ,{field:'degree', width:100, title: '学位'}
                // ,{field:'specialty', width:100, title: '专业'}
                ,{field:'birthDate', width:120, title: '出生日期'}
                ,{field:'entryDate', width:120, title: '入职日期'}
                ,{field:'phone', width:120, title: '电话'}
                ,{field:'statusString', width:75, title: '状态',templet:'#statusTpl'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:244}
            ]]
            ,page:true
            ,where: {
           staffName:$("#staffName").val(),
                departmentId:$("#departmentId").val()
        } //设定异步数据接口的额外参数

    });


        //查询指定条件
        $("#selectBut").click(function () {

            table.reload('staff', {
                url: baseUrl+'personnel/staff/list'
                ,where: {
                    staffName:$("#staffName").val(),
                    departmentId:$("#departmentId").val()
                } //设定异步数据接口的额外参数

            });


        });
        //监听下拉列表的改变
        form.on('select(departmentId)', function(data){
            table.reload('staff', {
                url: baseUrl+'personnel/staff/list'
                ,where: {
                    staffName:$("#staffName").val(),
                    departmentId:$("#departmentId").val()
                } //设定异步数据接口的额外参数

            });


        });

        //行工具栏事件
        table.on('tool(staff)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'edit'){ //编辑
                layer.msg("编辑")
                layer.open({
                    title: '编辑'
                    ,content: baseUrl+'personnel/staff/edit-ui?id='+data.id
                    ,type:2
                    ,area: ['1000px', '550px']
                    // 弹出层销毁时刷新表格数据
                    ,end:function () {
                        table.reload('staff', {//刷新表格数据
                            url: baseUrl+'personnel/staff/list'
                            ,where: {
                                staffName:$("#staffName").val(),
                                departmentId:$("#departmentId").val()
                            } //设定异步数据接口的额外参数

                        });
                    }
                })
                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    ,title: 'xxx'
                });
            }
            else if(layEvent === 'delete'){//删除



                layer.confirm('是否确认删除？', {
                    btn: ['yes', 'no'] //可以无限个按钮
                    ,yes: function(index, layero){
                        //按钮【按钮三】的回调
                        obj.del();
                        layer.open({
                            title: '删除员工信息'
                            ,content: '删除成功！'
                            // ,end:function () {
                            //     //当你在iframe页面关闭自身时
                            //     var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            //     parent.layer.close(index); //再执行关闭
                            // }
                        });
                        $.ajax({
                            url:baseUrl+"personnel/staff/del",
                            data:{"id":data.id},
                            type:"post",
                            dataType:"json",
                            success:function (result) {
                                if (result.code==0){


                                }else {
                                    layer.open({
                                        title: '删除菜品分类信息'
                                        ,content: result.msg
                                    });
                                }
                            },
                            error:function () {
                                layer.msg("服务器原地爆炸,请联系管理员!!!");
                            }
                        })
                        obj.del();
                    }
                },function(index, layero){
                    //按钮【按钮一】的回调

                });


            } else if(layEvent === 'show'){ //查看

                layer.open({
                    title: '查看菜品分类'
                    ,content: baseUrl+'personnel/staff/show-ui?id='+data.id
                    ,type:2
                    ,area: ['1000px', '550px']

                });

            }
        });





        //表头工具栏事件
        table.on('toolbar(staff)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    layer.open({
                        type: 2,
                        content: baseUrl+"personnel/staff/add-ui",
                        area: ['1000px', '550px'],
                        end:function () {
                            table.reload('staff', {//刷新表格数据
                                url: baseUrl+'personnel/staff/list'
                                ,where: {
                                    staffName:$("#staffName").val(),
                                    departmentId:$("#departmentId").val()
                                } //设定异步数据接口的额外参数

                            });
                        }
                    });
                    break;



            };
        });






    });
</script>
    <script type="text/html" id="sexTpl">
        {{#  if(d.sex === '女'){ }}
        <span style="color: #F581B1;">{{ d.sex }}</span>
        {{#  } else { }}
        {{ d.sex }}
        {{#  } }}
    </script>
<script type="text/html" id="statusTpl">
    {{#  if(d.statusString == '已离职'){ }}
    <span style="color: red;">{{ d.statusString }}</span>
    {{#  } else if(d.statusString === '请假中'){ }}
    <span style="color: yellowgreen;">{{ d.statusString }}</span>
    {{#  } else{ }}
    {{ d.statusString }}
    {{#  } }}

</script>
</body>
</html>
